<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/web.css">
	<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
	<script type="text/javascript" src="../../js/jquery.min.js"></script>

</head>
<body id="write">
	<div class="wrap">

		<div class="top">
	        <div class="Topsearch clearfix">
	            <div class="logo left"><img src="../../img/indexLogo.png"></div>
	            <div class="search right">
	                <div class="Insearch clearfix"><input class="left" type="text" name="" placeholder="请输入关键字"><button class="left">搜索</button></div>
	                <div class="searchHot">
	                    <span>热搜词 : </span>
	                    <a href="javascript:;">天后宫</a>
	                    <a href="javascript:;">湿地公园</a>
	                    <a href="javascript:;">景点</a>
	                    <a href="javascript:;">特产</a>
	                </div>
	            </div>
	        </div>
	        <ul class="TopNav clearfix">
	            <li><a class="haveBorder first" href="../../index.html">首页</a></li>
	            <li><a class="haveBorder" href="../active.html">政务动态</a></li>
	            <li><a class="haveBorder" href="../open.html">政务公开</a></li>
	            <li><a class="haveBorder" href="../service.html">办事服务</a></li>
	            <li class="active"><a class="haveBorder" href="../interaction.html">公众互动</a></li>
	            <li><a class="haveBorder" href="../public.html">公众服务</a></li>
	            <li><a href="../toppic.html">专题中心</a></li>
	        </ul>  
	    </div>

		<div class="content">

			<div class="WriteWrap">

				<div class="path">
					<span>公众互动 ></span>
					<span class="now">局长信箱</span>
				</div>

				<div class="WriteCounter">
					<p class="PBig">局长信箱</p>
					<p class="Pindent">欢迎您关注局长信箱，对南沙工作提出宝贵的意见和建议。您上交的信件将及时转交我局领导及有关单位参阅。对反映集中的共性问题，我们将不定期做统一回复。如需对相关方面进行投诉，请至"在线投诉"栏目。感谢您对南沙智慧旅游工作的支持和关心。</p>
					<form>
						<ul class="Allinputs">
							<li>
								<p>用户信息(<span class="sign"> * </span>为必填项)</p>
							</li>
							<li>
								<div class="inputs clearfix">
									<div class="clearfix name">
										<span class="left">
											<span class="sign">*</span>
											姓
										</span>
										<span class="secname right">名 :</span></span>
									</div>
									
									<input class="special right" type="text" name="">
								</div>
							</li>
							<li class="clearfix">
								<div class="left inputs">
									<span class="sign">*</span>
									<span>联系方式 :</span>
									<input type="text" name="" id="mobile">
									<i class="icon iconfont icon-xxxxxx- mobileI"></i>
									<span class="warn warnM">请输入正确的电话号码</span>
								</div>
								<div class="right inputs">
									<span class="sign">*</span>
									<span>回复信箱 :</span>
									<input type="email" name="" id="email">
									<i class="icon iconfont icon-xxxxxx- emailI"></i>
									<span class="warn warnE">请输入正确的邮箱地址</span>
								</div>
							</li>
							<li class="clearfix haveBorder">
								<div class="left inputs clearfix">
									
									<span class="left"><span class="sign">*</span>证件类型 :</span> 						                                
				                    <div class="select" id="type" >
				                        <h1 val="A">身份证</h1>
				                        <ul>
				                            <li val="A">身份证</li>
				                            <li val="B">士兵证</li>
				                            <li val="C">护照</li>
				                            <li val="D">港澳回归证</li>
				                            <li val="E">出生证</li>
				                            <li val="F">户口本</li>
				                        </ul>
				                        <i class="icon iconfont icon-xialajiantouxiangxia arrow"></i>
				                    </div>                                   

								</div>
								<div class="right inputs">
									<span class="sign">*</span>
									<span>证件号码 :</span>
									<input type="text" name="" id="card">
									<i class="icon iconfont icon-xxxxxx- cardI"></i>
									<span class="warn warnC">请输入正确的证件号码</span>
								</div>
							</li>
							<li>
								<p>证件信息(<span class="sign"> * </span>为必填项)</p>
							</li>
							<li>
								<div><p>
										<span class="sign">*</span>
										信件主题
									</p>
								</div>
								<div class="textareaTitle">
									<input id="title" type="text" name="" placeholder="标题不少于10个字">
									<i class="icon iconfont icon-xxxxxx- titleI"></i>
									<span class="warn warnT">标题不少于10个字</span>
								</div>
							</li>
							<li>
								<div><p>
										<span class="sign">*</span>
										信件内容</p>
								</div>
								<div class="textareaWrap">
									<textarea id="inner" name="" placeholder="内容不少于50个字"></textarea>
									<i class="icon iconfont icon-xxxxxx- wrapI"></i>
									<span class="warn warnW">内容不少于50字</span> 
								</div>
							</li>
							<li>
								<div><p>
										<span class="sign">*</span>
										信件内容</p>
								</div>
								<div class="radios">
									<div><input type="radio" name="letter">我要咨询</div>
									<div><input type="radio" name="letter">我要提意见</div>
									<div><input type="radio" name="letter">我要表扬</div>
								</div>
							</li>
							<li>
								<div><p>
										<span class="sign">*</span>
										验证码</p>
								</div>
								<div class="code">
									<input class="Inmima left" type="text" name="" id="mima">
									<i class="icon iconfont icon-xxxxxx- codeI"></i>
									<span class="warn warnCo">请输入正确的验证码</span>
									<img class="mima left" src="../../img/mima.png">
									<a class="renovate left" href="">刷新</a>
								</div>
							</li>
						</ul>
						<div class="btns">
							<button id="submit">提交</button>
							<button id="restart">重置</button>
						</div>
					</form>
				</div>
			</div>

		</div>

		<div class="d-footer clearfix">
	        <ul class="left link">
	            <li class="title">友情链接</li>
	            <li class="clearfix"><a class="left" href="javascript:;">南沙区政府</a><a class="right" href="javascript:;">广州市体育局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市旅游局</a><a class="right" href="javascript:;">广州市文广局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市政府</a><a class="right" href="javascript:;">广东省政府</a></li>
	        </ul>
	        <ul class="QRcode left">
	            <li><img src="../../img/weixin.png"><p>印象南沙</p></li>
	            <li><img src="../../img/APP.png"><p>印象南沙</p></li>
	            <li><img src="../../img/gongzhong.png"><p>印象南沙</p></li>
	        </ul>
	        <ul class="left copy">
	            <li>
	                <a href="../firstDetial/map.html"><span>关于我们</span></a>
	                <span class="between">-</span>
	                <a href="../firstDetial/map.html"><span>版权保护</span></a>
	                <span class="between">-</span>
	                <a href="../firstDetial/map.html"><span>网站帮助</span></a>
	                <span class="between">-</span>
	                <a href="../firstDetial/map.html"><span>网站地图</span></a>
	            </li>
	            <li>2016 &copy 版权归广州市南沙区文化广电新闻出版局所有</li>
	            <li>地址 : 广州市南沙区凤凰大道1号</li>
	            <li>粤ICP备10041711号-3</li>
	        </ul>
	    </div>

	</div>


	<script type="text/javascript">

		



		$("#title").blur(function(){
			if($("#title").val().length<10){
				$("#title").css("border","1px #ff0000 solid");
	        	$(".titleI").css("display","inline-block");
	        	$(".warnT").css("display","inline-block");
	        }else{
	        	$("#title").css("border","1px #ccc solid");
	        	$(".titleI").css("display","none");
	        	$(".warnT").css("display","none");
	        }
		})

		$("#inner").blur(function(){
			if($("#inner").val().length<=50){
				$("#inner").css("border","1px #ff0000 solid");
	        	$(".wrapI").css("display","inline-block");
	        	$(".warnW").css("display","inline-block");
	        }else{
	        	$("#inner").css("border","1px #ccc solid");
	        	$(".wrapI").css("display","none");
	        	$(".warnW").css("display","none");
	        }
		})

		$("#mima").blur(function(){
			if($("#mima").val().length!=4){
				$("#mima").css("border","1px #ff0000 solid");
	        	$(".codeI").css("display","inline-block");
	        	$(".warnCo").css("display","inline-block");
	        }else{
	        	$("#mima").css("border","1px #ccc solid");
	        	$(".codeI").css("display","none");
	        	$(".warnCo").css("display","none");
	        }
		})

		$("#restart").click(function(){
			window.location.reload();
		})
		$("#mobile").blur(function(){
			checkMobile($("#mobile").val());
		});
		$("#email").blur(function(){
			checkEmail($("#email").val());
		});


		$("#card").blur(function(){
			var Tvalue = $(".select h1").attr("val");	

				if(Tvalue == "A"){
					
						checkAcard($("#card").val());
					
				}else if(Tvalue == "B"){
					
						checkBcard($("#card").val());
					
				}else if(Tvalue == "C"){
					
						checkCcard($("#card").val());
				
				}else if(Tvalue == "D"){
					
						checkDcard($("#card").val());
					
				}else if(Tvalue == "E"){
					
						checkEcard($("#card").val());
				
				}else if(Tvalue == "F"){
					
						checkFcard($("#card").val());
				
				}
			
		});


	   function checkMobile(str)  
	   {  
	       var re=/^1[34578]\d{9}$/;  
	       if(!re.test(str))  
	       {  
	          	$("#mobile").css("border","1px #ff0000 solid");
	        	$(".mobileI").css("display","inline-block");
	        	$(".warnM").css("display","inline-block");
	       }else{
	       		$("#mobile").css("border","1px #ccc solid");
	        	$(".mobileI").css("display","none");
	        	$(".warnM").css("display","none");
	       }
	   }  
	     

	   function checkEmail(str)  
	   {  
	       re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/  
	       if(re.test(str))  
	       {  
	       		$("#email").css("border","1px #ccc solid");
	        	$(".emailI").css("display","none");
	        	$(".warnE").css("display","none");
	          	 
	       }else{
	       		$("#email").css("border","1px #ff0000 solid");
	         	$(".emailI").css("display","inline-block"); 
	         	$(".warnE").css("display","inline-block");
	       }
	   }  

	   function checkAcard(str)  
	   {  	
	   		//身份证
	       	var re=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	       	console.log($("#type").attr("value"))
	   }  

	   function checkBcard(str)  
	   {  	
	   		//士兵证
	       	var re=/^[a-zA-Z0-9]{7,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	       	console.log($("#type").attr("value"))
	   }  

	   function checkCcard(str)  
	   {  
	   		//护照
	       	var re=/^1[45][0-9]{7}|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8})|([H|h|M|m]\d{8，10})$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	       	console.log($("#type").attr("value"))
	   }  

	   function checkDcard(str)  
	   {  
	   		//港澳回归证
	       	var re=/^[a-zA-Z0-9]{5,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	   }  

	   function checkEcard(str)  
	   {  
	   		//出生证
	       	var re=/^[a-zA-Z0-9]{5,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	   }  

	   function checkFcard(str)  
	   {  
	   		//户口本
	       	var re=/^[a-zA-Z0-9]{3,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	   }  

	   	// 下拉选择框
	    var isDown = true;
	    $('.select').on('click', function (e) {
	        if (isDown) {
	            $(this).find('ul').show();
	            isDown = false;
	        } else {
	            $(this).find('ul').hide();
	            isDown = true;
	        }
	        e.stopPropagation();
	    });


	   	// 点击选择
	    $('.select ul li').on('click', function (e) {
	        $('.select h1').text($(this).text());
	        $('.select h1').attr("val",$(this).attr("val"));
	        $(this).parent('ul').hide();
	        isDown = true;
	        e.stopPropagation();
	        console.log($(this).attr("val"))
	    });

	    $(document).off('click');
	    $(document).on('click', function () {
	        isDown = true;
	        $('.select ul').hide();
	    });

	    $(window).off('scroll');
	    $(window).on('scroll', function () {
	        isDown = true;
	        $('.select ul').hide();
	    });



	   console.log($(".select h1").attr("val"));
			
	</script>
</body>
</html>